🎯 系列目標:用 30 天時間,從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能
💻 作者:輔大智慧資安 412580084
📅 Day 26:響應式設計 - 電腦版與手機版
昨天 Day 25 我們完成了課表渲染引擎的核心功能實作,實現了資料讀取、學生資訊渲染和課程動態顯示。今天我們要專注於響應式設計,只區分電腦版和手機版。
今天我們要完成:
這邊我選擇以下尺寸標準來設計:
/* 電腦版 */
@media (min-width: 768px) {
/* 電腦版樣式 */
}
/* 手機版 */
@media (max-width: 767px) {
/* 手機版樣式 */
}
這裡可以依照自己想法設計:
/* 電腦版樣式 */
@media (min-width: 768px) {
body {
margin: 20px;
}
.schedule-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.controls-panel {
margin-bottom: 20px;
}
.student-card {
padding: 20px;
}
.student-details {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.schedule-table th,
.schedule-table td {
padding: 15px;
font-size: 18px;
}
.course-card {
padding: 8px;
}
.course-name {
font-size: 16px;
}
.course-room {
font-size: 14px;
}
.schedule-header th {
padding: 12px;
font-size: 20px;
}
.time-header {
min-width: 120px;
}
.day-header {
min-width: 150px;
}
}
/* 手機版樣式 */
@media (max-width: 767px) {
body {
margin: 0;
padding: 10px;
}
.schedule-container {
padding: 10px;
margin: 5px;
border-radius: 5px;
}
.controls-panel {
flex-direction: column;
gap: 8px;
margin-bottom: 15px;
}
.control-btn,
.theme-selector {
width: 100%;
padding: 10px;
font-size: 14px;
}
.student-card {
padding: 15px;
}
.student-details {
grid-template-columns: 1fr;
}
.info-item {
justify-content: space-between;
padding: 5px 0;
}
.schedule-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 關鍵優化:移除固定的最小寬度,讓表格可以更靈活地縮放 */
.schedule-table {
width: max-content;
min-width: 300px;
font-size: 0.75rem;
}
.schedule-table th,
.schedule-table td {
padding: 6px;
font-size: 10px;
white-space: nowrap;
min-width: 60px;
}
.course-card {
padding: 3px;
margin: 1px;
max-width: 120px;
width: fit-content;
}
.course-name {
font-size: 10px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.course-room {
font-size: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 時間欄位垂直排列 */
.time-period,
.time-range {
display: block;
}
.time-range {
font-size: 8px;
}
.schedule-table thead {
position: sticky;
top: 0;
z-index: 10;
}
.schedule-wrapper::-webkit-scrollbar {
height: 6px;
}
.schedule-wrapper::-webkit-scrollbar-track {
background: var(--background-color);
}
.schedule-wrapper::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
}
使用瀏覽器開發工具測試兩種顯示模式:
今天我們完成了響應式設計,特別優化了手機版表格的寬度顯示和文字處理。明天我們將實作課表的進階功能,包括重新載入、匯出圖片等功能,進一步完善使用者體驗!